
<template>
  <el-dialog
    :title="!dataForm.contractId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @open="handlerDialogOpen"
    width="60%">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="合同名称" prop="contractName">
            <el-input v-model="dataForm.contractName" placeholder="合同名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!--
          <el-form-item label="合同类型" prop="contractType">
            <el-input v-model="dataForm.contractType" placeholder="合同类型"></el-input>
          </el-form-item>
          -->
          <el-form-item label="房间" prop="roomId">
            <el-select v-model="dataForm.roomId" placeholder="房间" @change="selectRoom">
              <el-option v-for="item in dataForm.roomList" :key="item.roomId" :label="dataForm.roomFloorLabel" :value="item">
                <template sloe-scope="{item}" >
                    {{item.building}}({{item.roomFloor}}楼)
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="长者" prop="customerId">
            <el-select v-model="dataForm.customerId" placeholder="长者">
              <el-option v-for="item in dataForm.customerList" :key="item.id" :label="item.name" :value="item.id">
                <template sloe-scope="{item}" >
                    {{item.name}}
                </template>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="签订日期" prop="signingDate">
            <el-date-picker
              v-model="dataForm.signingDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              type="date"
              placeholder="选择合同签订日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同期限" prop="contractTerm">
            <el-date-picker
              v-model="dataForm.contractTerm"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              type="date"
              placeholder="选择合同期限日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同金额" prop="amount">
            <el-input v-model="dataForm.amount" placeholder="合同金额"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="甲方名称" prop="party1Name">
            <el-input v-model="dataForm.party1Name" placeholder="甲方名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方名称" prop="party2Name">
            <el-input v-model="dataForm.party2Name" placeholder="乙方名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="甲方地址" prop="party1Address">
            <el-input v-model="dataForm.party1Address" placeholder="甲方地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方地址" prop="party2Address">
            <el-input v-model="dataForm.party2Address" placeholder="乙方地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="甲方联系方式" prop="party1Contact">
            <el-input v-model="dataForm.party1Contact" placeholder="甲方联系方式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="乙方联系方式" prop="party2Contact">
            <el-input v-model="dataForm.party2Contact" placeholder="乙方联系方式"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="合同内容" prop="contractContent">
            <el-input type="textarea" v-model="dataForm.contractContent" placeholder="合同内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        bedList:[],
        dataForm: {
          contractId: '',
          contractName: '',
          contractType:'',
          party1Name: '',
          party1Address: '',
          party1Contact: '',
          party2Name: '',
          party2Address: '',
          party2Contact: '',
          signingDate: '',
          contractTerm: '',
          contractContent: '',
          customerList: [],
          roomList: [],
          customerId:'',
          roomId:'',
          amount:0,
          roomFloorLabel:''
        },
        dataRule: {
          contractName: [
            { required: true, message: '合同名称不能为空', trigger: 'blur' }
          ],
          customerId: [
            { required: true, message: '长者不能为空', trigger: 'blur' }
          ],
          roomId: [
            { required: true, message: '房间不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handlerDialogOpen(){
        
      },
      init (id) {
        this.dataForm.contractId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.contractId) {
            
            this.$http({
              url: this.$http.adornUrl(`/customer/infocusomerrecords/customerlist`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.customerList = data.data;
              }
            });
            
            this.$http({
              url: this.$http.adornUrl(`/cw/cwroom/getRoomList`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.roomList = data.data;
                this.$http({
                  url: this.$http.adornUrl(`/ht/contracts/info/${this.dataForm.contractId}`),
                  method: 'get',
                  params: this.$http.adornParams()
                }).then(({data}) => {
                  if (data && data.code === 0) {
                    this.dataForm.contractId = data.contracts.contractId;
                    this.dataForm.contractName = data.contracts.contractName;
                    this.dataForm.contractType = data.contracts.contractType;
                    this.dataForm.party1Name = data.contracts.party1Name;
                    this.dataForm.party1Address = data.contracts.party1Address;
                    this.dataForm.party1Contact = data.contracts.party1Contact;
                    this.dataForm.party2Name = data.contracts.party2Name;
                    this.dataForm.party2Address = data.contracts.party2Address;
                    this.dataForm.party2Contact = data.contracts.party2Contact;
                    this.dataForm.signingDate = data.contracts.signingDate;
                    this.dataForm.contractTerm = data.contracts.contractTerm;
                    this.dataForm.contractContent = data.contracts.contractContent;
                    this.dataForm.customerId = data.contracts.customerId;
                    this.dataForm.amount = data.contracts.amount;
                    this.dataForm.roomList.forEach((room) => {
                      if(room.roomId==data.contracts.roomId){
                        this.dataForm.roomId = room;
                        this.dataForm.roomFloorLabel = (room.building?room.building:'')+'('+room.roomFloor+'楼)';
                      }
                    });
                  }
                })
              }
            });
            
          }else{
            this.$http({
              url: this.$http.adornUrl(`/customer/infocusomerrecords/customerlist`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.customerList = data.data;
              }
            });
            
            this.$http({
              url: this.$http.adornUrl(`/cw/cwroom/getRoomList`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.roomList = data.data;
              }
            });
          }
        })
      },
      selectRoom(v) {
        this.dataForm.amount =v.monthCost;
        this.dataForm.roomFloorLabel = (v.building?v.building:'')+'('+v.roomFloor+'楼)';
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/ht/contracts/${!this.dataForm.contractId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                contractId: this.dataForm.contractId,
                contractName: this.dataForm.contractName,
                contractType:this.dataForm.contractType,
                party1Name: this.dataForm.party1Name,
                party1Address: this.dataForm.party1Address,
                party1Contact: this.dataForm.party1Contact,
                party2Name: this.dataForm.party2Name,
                party2Address: this.dataForm.party2Address,
                party2Contact: this.dataForm.party2Contact,
                signingDate: this.dataForm.signingDate,
                contractTerm: this.dataForm.contractTerm,
                contractContent: this.dataForm.contractContent,
                customerId: this.dataForm.customerId,
                roomId: this.dataForm.roomId.roomId,
                amount: this.dataForm.amount
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
